@use "sass:map";
@use "@react-md/core";

$max-height: 50rem !default;
$tablet-max-height: min(60vh, $max-height) !default;
$color-preview-offset: 0.25em !default;
$color-preview-border-radius: 0.25em !default;
$color-preview-inline-size: 1em !default;
$color-preview-display-size: 2.5em !default;
$color-preview-outer-width: 0.25em !default;
$color-preview-border-width: $color-preview-outer-width + 0.0625em !default;

@mixin variables {
  --code-max-height: #{$max-height};
  --code-tablet-max-height: #{$tablet-max-height};
  --code-margin: 0;
  --code-padding: 1rem;
  --code-preview-border-radius: #{core.$card-border-radius};
  --color-preview-size: #{$color-preview-display-size};
  --color-preview-large-offset: 50%;
  --color-preview-border-radius: #{$color-preview-border-radius};
  --color-preview-inline-size: #{$color-preview-inline-size};
  --color-preview-offset: #{$color-preview-offset};
  --color-preview-outer-width: #{$color-preview-outer-width};
  --color-preview-border-width: #{$color-preview-border-width};
  --color-preview-inline-offset: #{calc(
      var(--color-preview-inline-size) + var(--color-preview-offset) * 2
    )};
  --color-preview-popup-offset: -0.25em;
  --color-preview-popup-transform: #{calc(
      var(--color-preview-inline-size) - 50%
    )};
  --color-preview-popup-transform-rtl: #{calc(
      50% - var(--color-preview-inline-size)
    )};
}

@mixin color-preview-box-shadow {
  box-shadow:
    inset 0 0 0 var(--color-preview-outer-width)
      var(--color-preview-background-color),
    inset 0 0 0 var(--color-preview-border-width)
      var(--color-preview-border-color);
}

@mixin styles {
  .code-block {
    margin: 2rem 0;
    position: relative;
    width: 100%;

    &--no-tm {
      margin-top: 0;
    }

    &__scroll-container {
      @include core.interaction-outline($outline-offset: false);

      max-height: var(--code-max-height);
      overflow: auto;

      &:focus-visible,
      &:has(:focus-visible) {
        @include core.interaction-focus-styles($disable-background: true);
      }

      @include core.tablet-media {
        --code-max-height: var(--code-tablet-max-height);
      }
    }

    &__pre-container {
      float: left;
      min-width: 100%;
      overflow: hidden;
      position: relative;
    }

    &__pre {
      margin: var(--code-margin);
      white-space: pre;

      &--wrap {
        overflow-wrap: anywhere;
        white-space: pre-wrap;
        word-break: break-all;
      }
    }
  }

  .code-preview {
    @include core.theme-set-var(background-color, var(--code-preview-bg));
    @include core.divider-border-style;

    background-color: var(--code-preview-bg);
    border-radius: var(--code-preview-border-radius);
    padding: 3rem;
    position: relative;

    &--np {
      padding: 0;
    }

    &--no-bb {
      border-bottom-width: 0;
    }

    &--block {
      display: block;
    }

    &--transparent {
      --code-preview-bg: transparent;
    }

    &--dark {
      @include core.use-dark-theme;
      @include core.theme-use-var(background-color);
      @include core.theme-use-var(color, text-primary-color);
    }

    &__error {
      bottom: 0;
      left: 1rem;
      position: absolute;
      right: 1rem;
      white-space: pre;
    }
  }

  .code-editor {
    &__code {
      pointer-events: none;
      position: relative;
    }

    &__scroll-container {
      &--hoverable {
        @include core.mouse-hover {
          @include core.interaction-focus-styles($disable-background: true);
        }
      }
    }

    &__textarea {
      background: none;
      border: 0;
      border-left: var(--code-border-left);
      color: inherit;
      font-family: var(--code-font-family);
      font-size: var(--code-font-size);
      height: 100%;
      left: 0;
      line-height: var(--code-line-height);
      margin: var(--code-margin);
      overflow: hidden;
      overflow-wrap: break-word;
      padding: var(--code-padding);
      position: absolute;
      resize: none;
      tab-size: var(--code-tab-size);
      -webkit-text-fill-color: transparent;
      top: 0;
      white-space: pre;
      width: 100%;
      word-break: keep-all;
    }

    &__message {
      @include core.tooltip-use-var(background-color);
      @include core.tooltip-use-var(color);
      @include core.interaction-outline;

      border-radius: core.$tooltip-border-radius;
      left: 50%;
      padding: 0.25rem 0.5rem;
      position: absolute;
      top: 0.5rem;
      transform: translateX(-50%);
      z-index: 2;

      &:focus-visible {
        @include core.interaction-focus-styles;
      }
    }

    &__actions {
      inset: 0.25rem 0 auto;
      padding-block: 0;
      pointer-events: none;
      position: absolute;

      > * {
        pointer-events: auto;
      }
    }

    &__copy {
      // Note: The height and positioning is set up in a way so that the copy button
      // can be visible in a single-line code example without displaying scrollbars
      position: absolute;
      right: 1rem;
      top: 0.25rem;

      @include core.rtl {
        left: 1rem;
        right: auto;
      }
      // copy to clipboard doesn't make much sense on phones
      @include core.phone-media {
        display: none;
      }
    }

    &__progress {
      @include core.progress-set-var(
        color,
        core.interaction-get-var(focus-color)
      );
      color: core.$interaction-focus-color;
      position: absolute;
      top: 0;
    }
  }

  .code-block-app-bar {
    @include core.interaction-use-dark-surface;
    @include core.theme-set-var(
      text-primary-color,
      core.$dark-theme-text-primary-color
    );
    @include core.theme-set-var(
      text-secondary-color,
      core.$dark-theme-text-secondary-color
    );
    @include core.theme-use-var(color, text-primary-color);

    background-color: map.get(core.$dark-elevation-colors, 10);
  }

  .inline-code {
    color: var(--code-color);
    font-family: var(--code-inline-font-family);
    font-size: 1em;
    white-space: pre-wrap;

    &--ticked {
      &::before,
      &::after {
        content: "\`";
      }
    }
  }

  .color-preview {
    display: inline-block;

    &--icon {
      @include core.icon-use-var(height, size);
      @include core.icon-use-var(width, size);

      background: var(--color);
      border-radius: var(--color-preview-border-radius);
    }

    &--color-only {
      --color-preview-popup-transform: #{calc(
          -50% - var(--color-preview-offset) / 2
        )};
    }

    &--text {
      padding-left: var(--color-preview-inline-offset);
      position: relative;

      &::before,
      &::after {
        background: var(--color);
        border-radius: var(--color-preview-border-radius);
        content: "";
        display: inline-block;
        height: var(--color-preview-inline-size);
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: var(--color-preview-inline-size);
        z-index: 2;
      }

      &::before {
        left: var(--color-preview-offset);
      }

      &::after {
        @include color-preview-box-shadow;

        height: var(--color-preview-size);
        left: var(--color-preview-large-offset);
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: var(--color-preview-popup-offset);
        transform: translate3d(var(--color-preview-popup-transform), -100%, 0);
        transition: opacity core.$linear-duration;
        width: var(--color-preview-size);
      }

      &:hover::after {
        opacity: 1;
      }
    }

    @include core.rtl {
      --color-preview-popup-transform: var(--color-preview-popup-transform-rtl);

      &--color-only {
        --color-preview-popup-transform-rtl: #{calc(
            50% + var(--color-preview-offset) / 2
          )};
      }

      &--text {
        padding-left: 0;
        padding-right: var(--color-preview-inline-offset);

        &::before {
          left: auto;
          right: var(--color-preview-offset);
        }

        &::after {
          left: auto;
          right: var(--color-preview-large-offset);
        }
      }
    }
  }
}

@mixin use-light-theme {
  --code-color: #{core.$pink-600};
  --code-preview-bg: #{core.$white};
  --color-preview-background-color: #{core.$black};
  --color-preview-border-color: #{core.$white};
}

@mixin use-dark-theme {
  --code-color: #{core.$pink-400};
  --code-preview-bg: #{core.$dark-theme-background-color};
  --color-preview-background-color: #{core.$white};
  --color-preview-border-color: #{core.$black};
}
